<template>
	<div class='learn-canvas-page'>
    <el-tabs v-model="activeName">
      <el-tab-pane
        v-for="item in canvasList"
        :key="item.name"
        :label="item.title"
        :name="item.name"
      >
      <div :class="['canvas-item', item.name] ">
        <div class="content">
           <component :is="item.component" />
        </div>
      </div>
      </el-tab-pane>
    </el-tabs>
	</div>
</template>

<script setup name='LearnCanvasPage'>
import { ref, shallowRef, onMounted  } from 'vue'
import randomDotLineCanvas from './random-dot-line-canvas.vue';
import gobangCanvas from './gobang-canvas.vue';
import aiCanvas from './ai-canvas.vue';

const activeName = ref('')
const canvasList = shallowRef([
  {
    name: 'random-dot-line',
    title: '随机点线',
    component: randomDotLineCanvas
  },
  {
    name: 'gobang',
    title: '五子棋',
    // component: gobangCanvas
    component: aiCanvas
  },
  {
    name: 'char-rain',
    title: '字符雨',
    // component: charRarnCanvas
  },
])

onMounted(()=>{
  activeName.value = process.env.NODE_ENV === 'development' ? 'char-rain' : 'random-dot-line'
})
</script>
<style lang='scss' scoped>
.learn-canvas-page {
  height: 100%;
  padding: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  .canvas-item {
		margin-bottom: 20px;
    .title {
      line-height: 30px;
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }
    .content {
      &.in-line {
        display: flex;
        align-items: center;
        justify-content: flex-start;
      }
    }
  }
}
</style>
